import { List, PullRefresh } from 'vant';
import { defineComponent } from 'vue';
import usePaging from '@/hooks/usePaging';
import styles from './index.module.<%= css %>';

export default defineComponent({
  props: {
    getPaging: {
      type: Function,
      default: () => {},
    },
    extraParams: {
      type: Object,
      default: {},
    },
    immediateLoading: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, { slots, expose }) {
    const { getPaging, extraParams } = props;
    const { list, loading, finished, refreshing, error, firstLoaded, onLoad, onRefresh } = usePaging({
      getPaging: getPaging as any,
      extraParams: extraParams as any,
    });

    expose({
      onRefresh,
      onLoad,
    });

    return () => {
      return (
        <PullRefresh v-model={refreshing.value} onRefresh={onRefresh}>
          <List
            v-models={[
              [error.value, 'error'],
              [loading.value, 'loading'],
            ]}
            finished={finished.value as unknown as boolean}
            finished-text="暂无数据"
            error-text="请求失败，点击重新加载"
            onLoad={onLoad}
            immediate-check={props.immediateLoading}
          >
            {firstLoaded.value && (list as any).value.length <= 0 && <div class={styles.empty} />}
            <div>{slots.default?.(list.value)}</div>
          </List>
        </PullRefresh>
      );
    };
  },
});
